<template>
  <div class="login wrap">
    <van-tabs @click="onClick">
      <van-tab title="登录" class="path">
        <img src="../assets/img/bg.jpg" class="bg" />
        <input
          type="text"
          v-model="phone"
          @input="phoneInput"
          placeholder="请输入手机号"
        />
        <input
          type="password"
          v-model="possWord"
          @input="posswordInput"
          placeholder="请输入密码"
        />
        <input type="button" @click="login" value="登 录" />
        <p class="agree">
          <van-checkbox v-model="checked">
            <span>登录即你同意<i>《用户协议》</i>和<i>《隐私权政策》</i></span>
          </van-checkbox>
        </p>
        <p class="third">第三方登录</p>
        <div class="img">
          <img src="../assets/img/disanfangdenglu.png" alt="" />
          <img src="../assets/img/disanfangdenglu_QQ.png" alt="" />
          <img src="../assets/img/disanfangdenglu-zhifubao.png" alt="" />
        </div>
      </van-tab>
      <van-tab title="注册" class="path">
        <i class="iconfont icon-bitian"></i>
        <input
          type="text"
          v-model="tel"
          @input="telInput"
          placeholder="请输入手机号"
        />
        <br>
        <i class="iconfont icon-bitian"></i>
        <input type="text" placeholder="请输入姓名" v-model="name"/>
        <br>
        <i class="iconfont icon-bitian"></i>
        <input
          type="password"
          v-model="passWords"
          @input="passwordsInput"
          placeholder="请输入密码"
        />
        <br>
        <i class="iconfont icon-bitian"></i>
        <input
          type="password"
          v-model="passWords2"
          placeholder="请再次输入密码"
        />
        <br>
        <i class="iconfont icon-bitian"></i>
        <input type="text" placeholder="请输入家庭成员数" v-model="peoplenum"/>
        <br>
        <i class="iconfont icon-bitian"></i>
        <input type="text" placeholder="请输入楼号" v-model="buildingnumber"/>
        <br>
        <i class="iconfont icon-bitian"></i>
        <input type="text" placeholder="请输入单元号" v-model="unit"/>
        <br>
        <i class="iconfont icon-bitian"></i>
        <input type="text" placeholder="请输入楼层数" v-model="floor"/>
        <br>
        <i class="iconfont icon-bitian"></i>
        <input type="text" placeholder="请输入门牌号" v-model="tablet"/>
        
        <input type="button" @click="register" value="注册" />
        <p class="agree">
          <van-checkbox v-model="checked">
            <span>登录即你同意<i>《用户协议》</i>和<i>《隐私权政策》</i></span>
          </van-checkbox>
        </p>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ownerLogin, ownerRegister } from "../api/api";
import { Toast } from "vant";
export default {
  // 定义属性
  name: "Login",
  data() {
    return {
      phone: "",
      possWord: "",
      sendBtn: true,
      hasSpec: true,
      checked: true,

      tel: "",
      name: "",
      passWords: "",
      passWords2: "",
      peoplenum: "",
      buildingnumber: "",
      unit: "",
      floor: "",
      tablet: "",
      sentBtn: true,
      havSpec: true,
    };
  },
  methods: {
    onClick() {
      // Toast(title);
    },
    phoneInput() {
      let reg = /^1[3-9]\d{9}$/g;
      // 如果符合手机号正则，按钮禁用取消，按钮外观改变
      if (reg.test(this.phone)) {
        this.sendBtn = true;
      } else {
        this.sendBtn = false;
      }
    },
    posswordInput() {
      let reg1 = /\d/;
      let reg2 = /[a-z]/gi;
      var reg3 = /[$@#&%]/;
      if (
        reg1.test(this.possWord) &&
        reg2.test(this.possWord) &&
        reg3.test(this.possWord)
      ) {
        this.hasSpec = true;
      } else {
        this.hasSpec = false;
      }
      console.log(this.hasSpec);
    },
    telInput() {
      let reg = /^1[3-9]\d{9}$/g;
      // 如果符合手机号正则，按钮禁用取消，按钮外观改变
      if (reg.test(this.tel)) {
        this.sentBtn = true;
      } else {
        this.sentBtn = false;
      }
    },
    passwordsInput() {
      let reg1 = /\d/;
      let reg2 = /[a-z]/gi;
      var reg3 = /[$@#&%]/;
      if (
        reg1.test(this.passWords) &&
        reg2.test(this.passWords) &&
        reg3.test(this.passWords)
      ) {
        this.havSpec = true;
      } else {
        this.havSpec = false;
      }
      console.log(this.havSpec);
    },
    login() {
      console.log(this.phone);
      console.log(this.possWord);
      if (this.phone && this.possWord) {
        console.log(this.possWord.length);
        if (this.sendBtn) {
          if (
            this.possWord.length >= 6 &&
            this.possWord.length <= 18 &&
            this.hasSpec == true
          ) {
            ownerLogin({
              owner_tel: this.phone,
              owner_pass: this.possWord,
            }).then((res) => {
              console.log(res);
              if (res.code == 200) {
                Toast.success("登录成功");
                // 存储用户信息
                localStorage.setItem("Owner", JSON.stringify(res.data));
                // 跳转首页
                this.$router.push({ path: "/" });
              } else {
                console.log(1111);
                Toast.fail("请输入正确的账号和密码");
              }
            });
          } else {
            Toast.fail("密码格式：必须包含数字、字母、特殊字符、长度在6-18位");
          }
        } else {
          Toast.fail("账号格式为11位的手机号");
        }
      } else {
        Toast.fail("请输入账号和密码");
      }
    },
    register() {
      if (this.tel && this.passWords && this.passWords2 && this.name && 
      this.peoplenum && this.buildingnumber && this.unit && this.floor && this.tablet) {
        if (this.sentBtn) {
          if (this.passWords != this.passWords2) {
            Toast.fail("两次输入的密码不一致");
          } else {
            if (
              this.passWords.length >= 6 &&
              this.passWords.length <= 18 &&
              this.havSpec == true
            ) {
              ownerRegister({
                owner_tel: this.tel,
                owner_pass: this.passWords,
                owner_name: this.name,
                owner_peoplenum: this.peoplenum,
                owner_buildingnumber: this.buildingnumber,
                owner_unit: this.unit,
                owner_floor: this.floor,
                owner_tablet: this.tablet,
              }).then((res) => {
                console.log(res);
                if (res.code == 200) {
                  localStorage.setItem("Owner", this.tel);
                  // this.$router.push({ path: "/login" });
                  Toast.fail("注册成功可以去登录了！");
                } else if (res.code == 201) {
                  Toast.fail("此账号已注册");
                }
              });
            } else {
              Toast.fail(
                "密码格式：必须包含数字、字母、特殊字符、长度在6-18位"
              );
            }
          }
        } else {
          Toast.fail("账号格式为11位的手机号");
        }
      } else {
        Toast.fail("请输入所有必填项");
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.login {
  width: 100%;
  height: 100%;
  font-size: 16px;
  .path {
    text-align: center;
    .icon-bitian{
      color: rgb(250, 75, 54);
    }
    .bg {
      width: 100%;
      height: 190px;
    }
    input {
      // padding: 10px;
      margin: 5px 0;
      width: 260px;
      height: 40px;
      background-color: #fff;
      // border-bottom: 1px solid #ccc;
      border: 1px solid #ccc;
      border-radius: 100px;
      padding: 5px 20px;
      font-size: 16px;
      &:last-of-type {
        background-color: rgb(250, 75, 54);
        margin-top: 5px;
        color: #fff;
        font-size: 18px;
        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
      }
    }
    .agree {
      font-size: 14px;
      padding: 10px 20px;
      color: #f9b468;
      margin-bottom: 20px;
      span {
        color: #666666;
        i {
          color: #2e5ef9;
        }
      }
    }
    .img {
      padding: 10px;
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      img {
        width: 30px;
        height: 30px;
      }
    }
    .third {
      text-align: center;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>